/*
 * @Author: your name
 * @Date: 2021-04-06 14:14:49
 * @LastEditTime: 2021-04-10 13:47:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my-app-koa\client\src\App.js
 */
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import Login from './components/auth/Login';
import Dashboard from './components/dashboard/Dashboard';
import PrivateRoute from './common/PrivateRoute'

import Register from './components/auth/Register';
import jwt_decode from 'jwt-decode';
import { logoutUser, setCurrentUser } from './actions/authActions';


import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//在使用之前需要npm 安装，我第一次没有安装，就给我报错了

// redux
import { Provider } from 'react-redux';
import store from './store';
import setAuthToken from './utils/setAuthToken';
import CreateProfile from './components/create-profile/CreateProfile';
import EditProfile from './components/edit-profile/EditProfile';
import AddExperience from './components/add-credentials/AddExperience';
import AddEducation from './components/add-credentials/AddEducation';
import Profiles from './components/profiles/Profiles';
import Profile from './components/profile/Profile';
import Posts from './components/posts/Posts';
import Post from './components/post/Post';

// 初始化用户信息
if (localStorage.getItem('jwtToken')) {

  const decode = jwt_decode(localStorage.jwtToken);
  setAuthToken(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decode))

  // 判断token是否过期
  const current = Date.now() / 1000;
  if (decode.exp < current) {
    store.dispatch(logoutUser())
    window.location.href = "/login"
  }
}

function App() {
  return (
    <Provider store={store}>
      <Router>
        {/* 路由的使用比较灵活，可以再index.js使用，也可以在App.js使用 */}
        <div className="App">
          <Navbar />
          <Route path="/" exact component={Landing}></Route>

          {/* exact 表示不再当前路由的时候，不显示该内容 */}
          <div className="container">
            <Route exact path="/profiles" component={Profiles} />
            <Route exact path="/profile/:handle" component={Profile} />
            <Switch>
              <PrivateRoute path="/dashboard" exact component={Dashboard} />
            </Switch>
            <Switch>
              <PrivateRoute path="/create-profile" exact component={CreateProfile} />
            </Switch>
            <Switch>
              <PrivateRoute path="/edit-profile" exact component={EditProfile} />
            </Switch>
            <Switch>
              <PrivateRoute exact path="/add-experience" component={AddExperience} />
            </Switch>
            <Switch>
              <PrivateRoute exact path="/add-education" component={AddEducation} />
            </Switch>
            <Switch>
              <PrivateRoute exact path="/feed" component={Posts} />
            </Switch>
            <Switch>
              <PrivateRoute exact path="/post/:id" component={Post} />
            </Switch>
            <Route path="/login" exact component={Login}></Route>
            <Route path="/register" exact component={Register}></Route>
          </div>
          <Footer />
        </div>
      </Router>
    </Provider>
  );
}

export default App;
